<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard Navigation Demo</title>

	<!-- demo -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/demo.css" rel="stylesheet">

	<!-- jQuery & jQuery UI + theme (required) -->
	<link href="css/jquery-ui.min.css" rel="stylesheet">
	<script src="js/jquery-1.12.0.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link rel="stylesheet" href="../css/keyboard.css">
	<script src="../js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="../js/jquery.mousewheel.js"></script>
	<!-- <script src="../js/jquery.keyboard.extension-typing.js"></script> -->
	<!-- <script src="../js/jquery.keyboard.extension-autocomplete.js"></script> -->
	<script src="../js/jquery.keyboard.extension-navigation.js"></script>

	<style>
	/* Add this css so we can see when the action (orange) keys are highlighted */
	.ui-keyboard-button.ui-state-active.ui-state-hover {
		border: 1px solid #fff;
		-moz-box-shadow: 1px 1em 1px #ffba2b inset;
		-webkit-box-shadow: 1px 1em 1px #ffba2b inset;
		box-shadow: 1px 1em 1px #ffba2b inset;
	}
	/* Class added to indicate the virtual keyboard has navigation focus */
	.hasFocus { border-color: #59b4d4; }
	</style>

	<!-- initialize keyboard (required) -->
	<script>
	$(function(){

		// change default navigation keys
		$.extend($.keyboard.navigationKeys, {
			// all keys
			toggle     : 112, // toggle key; F1 = 112 (event.which value for function 1 key)
			enter      : 13,
			pageup     : 33,
			pagedown   : 34,
			end        : 35,
			home       : 36,
			left       : 37,
			up         : 38,
			right      : 39,
			down       : 40,
			// move caret WITH navigate toggle active
			caretrt    : 45, // Insert key
			caretlt    : 46, // delete key

			/* Custom Navigation Functions
			 * move caret without navigate toggle active */
			caretright : function(kb){
				$.keyboard.keyaction.right(kb);
			},
			caretleft  : function(kb){
				$.keyboard.keyaction.left(kb);
			}

		});

		// External trigger using any of the $.keyboard.navigationKeys keys (key:value)
		// no need to toggle first
		// $('#keyboard').trigger('navigate', 'home');

		// or, navigate to a specific key [ row, index ] (both use zero-based indexes)
		// $('#keyboard').trigger('navigateTo', [2,3]);

		// mini navigation block
		$('#info button').click(function(){

			var $button = $(this),
				action = $button.attr('data-action');
			if (action === 'toggle') {
				// cruddy code to highlight the toggle button while active
				var toggleMode = $('textarea').data('keyboard').navigation_options.toggleMode;
				$button.toggleClass('active', !toggleMode);
			}
			$('textarea').trigger('navigate', action);
		});

		$('#keyboard')
			.keyboard({
				alwaysOpen: true
			})
			.addNavigation({
				position   : [0,0],     // set start position [row-number, key-index]
				toggleMode : false,     // true = navigate the virtual keyboard, false = navigate in input/textarea
				focusClass : 'hasFocus' // css class added when toggle mode is on
			});

	});
	</script>

</head>

<body>

	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" name="top">
					<span class="fa fa-keyboard-o fa-lg"></span>
				</a>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="../index.html">Home</a></li>
					<li><a href="basic.html">Basic</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Layouts <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="layouts.html">Standard</a></li>
							<li><a href="layouts2.html">Greywyvern</a></li>
							<li><a href="layouts3.html">Microsoft Keyboard</a></li>
							<li><a href="calculator.html"><span class="fa fa-calculator fa-lg"></span> Calculator</a></li>
						</ul>
					</li>
					<li class="dropdown active">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Extensions <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="altkeys-popup.html">Alt-keys</a></li>
							<li><a href="../index.html#autocomplete">Autocomplete</a></li>
							<li><a href="../index.html#caret">Caret</a></li>
							<li><a href="extender.html">Extender</a></li>
							<li><a href="preview-keyset.html">Keyset</a></li>
							<li><a href="mobile.html">Mobile</a></li>
							<li><a href="jquery-mobile-1.4.html">Mobile v1.4</a></li>
							<li class="active"><a href="navigate.html">Navigate <span class="sr-only">(current)</span></a></li>
							<li><a href="scramble.html">Scramble</a></li>
							<li><a href="../index.html#typing">Typing</a></li>
						</ul>
					</li>
					<li><a href="//jsfiddle.net/Mottie/egb3a1sk/"><span class="fa fa-flask fa-lg"></span> Playground</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right">
					<li><a href="//github.com/Mottie/Keyboard"><span class="fa fa-github fa-lg" title="GitHub"></span></a></li>
					<li><a href="//github.com/Mottie/Keyboard/archive/master.zip"><span class="fa fa-download fa-lg" title="Download"></span></a></li>
					<li><a href="//github.com/Mottie/Keyboard/wiki"><span class="fa fa-file-text-o fa-lg" title="Documentation"></span></a></li>
					<li><a href="//github.com/Mottie/Keyboard/issues"><span class="fa fa-bug fa-lg" title="Issues"></span></a></li>
				</ul>

			</div><!-- /.navbar-collapse -->
		</div><!-- /.container-fluid -->
	</nav>

	<h1><a href="//github.com/Mottie/Keyboard">Virtual Keyboard Navigate Demo</a></h1>
	<h4>Note: Navigation inside of the input/textarea is <strong>disabled</strong> while the toggle is active.<br>This includes the <span class="underline">autocomplete</span> extension navigation.</h4>

	<div id="wrap"> <!-- wrapper only needed to center the input -->

		<!-- keyboard input -->
		<textarea id="keyboard"></textarea>

	</div> <!-- End wrapper -->

	<br>

	<div id="info">
		<ul>
			<li><strong>Always active:</strong>
				<ul>
					<li><strong>Clear</strong> - Clear content.</li>
					<li><strong>&larr;</strong> - Move caret left.</li>
					<li><strong>&rarr;</strong> - Move caret right.</li>
					<li><strong>Backspace</strong> - Delete character to the left.<p></p></li>
				</ul>
			</li>
			<li><strong>Toggle must be active to use:</strong>
				<ul>
					<li><strong>Home</strong> - Move to the first key in the row.</li>
					<li><strong>Up</strong> - Move up one row.</li>
					<li><strong>Page Up</strong> - Move to the first row.</li>
					<li><strong>Left</strong> - Move one key left.</li>
					<li><strong>Shift-F1</strong> - Toggle navigation (textarea and keyboard).</li>
					<li><strong>Right</strong> - Move one key right.</li>
					<li><strong>End</strong> - Move to the last key in the row.</li>
					<li><strong>Down</strong> - Move down one row.</li>
					<li><strong>Page Down</strong> - Move to the last row.</li>
					<li><strong>Delete</strong> (&larr; Caret) - Move caret left.</li>
					<li><strong>Enter</strong> - Add the highlighted key.</li>
					<li><strong>Insert</strong> (Caret &rarr;) - Move caret right.</li>
				</ul>
			</li>
		</ul>

		<div class="nav">
			<button class="btn btn-default btn-xs" data-action="clear">Clear</button><button class="half btn btn-default btn-xs" data-action="caretLeft" title="Move caret left">&larr;</button><button class="half btn btn-default btn-xs" data-action="caretRight" title="Move caret right">&rarr;</button><button class="btn btn-default btn-xs" data-action="bksp">backspace</button>
			<hr>
			<button class="btn btn-default btn-xs" data-action="home">Home</button><button class="nav btn btn-xs" data-action="up">Up</button><button class="btn btn-default btn-xs" data-action="pageUp">PageUp</button><br>
			<button class="nav btn btn-xs" data-action="left">Left</button><button class="active btn btn-xs" data-action="enter">Enter</button><button class="nav btn btn-xs" data-action="right">Right</button><br>
			<button class="btn btn-default btn-xs" data-action="end">End</button><button class="nav btn btn-xs" data-action="down">Down</button><button class="btn btn-default btn-xs" data-action="pageDown">PageDown</button><br>
			<button class="btn btn-default btn-xs" data-action="caretLt">&larr; Caret</button><button class="btn btn-default btn-xs" data-action="toggle">Toggle</button><button class="btn btn-default btn-xs" data-action="caretRt">Caret &rarr;</button>
		</div>

	</div>

</body>
</html>
